<template>
	<view class="content">

		<view>
			<view class="m-2 ">
				<swiper indicator-dots autoplay :interval="3000" :duration="200" circular style="height: 280rpx;width: 710rpx;" >
					<swiper-item v-for="(item,index) in bannerList" :key="index" @click="clickBanner(item)">
						<image :src="item.bannerImageUrl" style="height: 280rpx;width: 710rpx;border-radius: 20upx;"></image>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="m-2 pt-2 mb-2">
				<view class="d-flex flex-wrap " >
					<view class="uni-bg-red entry_card" style="background-color: #e6ecff;" @click="tabEntry(1)">
						<view class="w-100 d-flex flex-row">
							<view class="d-flex flex-column pl-2 left_con">
								<view  class="card_title">
									<text>题库刷题</text>
								</view>
								<view class="card_sub_title">
									<text >快速掌握要点</text>
								</view>
							</view>
							<view class="right_con d-flex flex-column j-end">
								<view style="padding-bottom: 20upx;">
									<image src="../../static/img/card_icon_shuati.png" style="width: 60upx;height:60upx;"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="uni-bg-red entry_card ml-2"  style="background-color: #ffece5;" @click="tabEntry(2)">
						<view class="w-100 d-flex flex-row">
							<view class="d-flex flex-column pl-2 left_con" >
								<view  class="card_title" style="color: #9d573c;">
									<text>错题练习</text>
								</view>
								<view class="card_sub_title" style="color: #9d573c;">
									<text >找准学习漏洞</text>
								</view>
							</view>
							<view class="right_con  d-flex flex-column j-end">
								<view style="padding-bottom: 20upx;">
									<image src="../../static/img/card_icon_cuoti.png" style="width: 60upx;height:60upx;"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="uni-bg-red entry_card mt-2" style="background-color: #e1f6ff;" @click="tabEntry(3)">
						<view class="w-100 d-flex flex-row">
							<view class="d-flex flex-column pl-2 left_con" >
								<view  class="card_title" style="color: #386a7b;">
									<text>模拟考试</text>
								</view>
								<view class="card_sub_title" style="color: #386a7b;">
									<text >考前突击备战</text>
								</view>
							</view>
							<view class="right_con  d-flex flex-column j-end">
								<view style="padding-bottom: 20upx;">
									<image src="../../static/img/card_icon_moni.png" style="width: 60upx;height:60upx;"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="uni-bg-red entry_card ml-2 mt-2 " style="background-color: #eaf4fe;" @click="tabEntry(4)">
						<view class="w-100 d-flex flex-row">
							<view class="d-flex flex-column pl-2 left_con" >
								<view  class="card_title" style="color: #376494;">
									<text>证书查询</text>
								</view>
								<view class="card_sub_title" style="color: #376494;">
									<text >安全合格认证</text>
								</view>
							</view>
							<view class="right_con  d-flex flex-column j-end">
								<view style="padding-bottom: 20upx;">
									<image src="../../static/img/card_icon_zhengshu.png" style="width: 60upx;height:60upx;"></image>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="mt-2">
			<view class="ml-2 d-flex flex-row" style="font-size: 34upx;font-weight: bold;color: #425ca1;text-align: left;">
				<view style="width:50upx;height:80upx;line-height: 80upx;">
					<image src="../../static/img/moni_icon.png" style="width: 40upx;height: 40upx;margin-top:20upx;"></image>
				</view>
				<view style="width:620upx;height:90upx;line-height: 90upx;">
					<text>正在进行的模拟</text>
				</view>
			</view>
			
			<scroll-view scroll-y="true" class="sv"  :style="{height:scrollHeight+'px'}">
				<view>
					<view v-for="(item, index) in simulateList" :key="item.id" class="d-flex flex-column  mx-2 p-2 mt-2 moni_con" >
						<view class="d-flex flex-row">
							<view class="moni_title">
								<text>{{ item.paperName }}</text>
							</view>
						</view>
						<view>
							<text>开始时间：{{ item.startTime }}</text>
						</view>
						<view class="d-flex flex-row flex-nowrap j-sb">
							<view style="width: 310upx;">
								<text>考试时间： {{item.limitMinute}}分钟</text>
							</view>
							<view style="width: 310upx;">
								<button class="entry_btn" @click="entryMoniPaper(item)">进入模拟</button>
							</view>
						</view>
					</view>
					
					<view v-show="simulateList.length == 0" style="text-align: center;margin-top: 200upx;">
						<view>
							<image src="../../static/icon/nodata.png" style="width: 148upx;height: 100upx;"></image>
						</view>
						<text style="color:#868686;">暂无数据</text>
					</view>
					
					<view v-show="simulateList.length > 0" style="text-align: center;font-size: 24upx;color: #868686;margin-bottom:50uxp;">
						<text>已经到底了</text>
					</view>
				</view>
			</scroll-view>
			
			
			<!-- 报名提示弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content" >
					<text>您尚未报名，请联系单位先报名考试</text>
				</view>
			</uni-popup>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [],
				simulateList: [],
				
				apply: '',	// 报名信息
				
				pH:0, //窗口高度
				scrollHeight: 600,
			}
		},
		onPullDownRefresh() {
			
			this.getBanner()
			this.getSimulate()
			
			setTimeout(() => {
				uni.showToast({
					title: "刷新成功"
				})
			    uni.stopPullDownRefresh(); // 数据更新完成后停止下拉刷新
			}, 1500);
		},
		async onLoad(){
			await this.applyCheck()
			await this.getBanner()
			await this.getSimulate()
		},
		
		onShow() {
			if(!this.apply){
				this.applyCheck()
			}
		},
		
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success(res) {
					console.log('res:' + JSON.stringify(res))
					that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH = uni.createSelectorQuery().select(".sv"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data => {
						let pH = that._data.pH;
						that._data.scrollHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()
				}
			})
		},
		methods: {
			// 查询首页banner
			getBanner(){
				let url = '/index/banner'
				this.$H.post(url, {endpoint: '1'},{token: true}).then(res=>{
					// 用户类型错误
					if(res && res.code && res.code == 208){
						uni.showToast({
							title: '用户信息失效',
							icon: 'none'
						})
						uni.clearStorageSync()
						uni.navigateTo({
							url: '/pages/login'
						})
					}
					if(res){
						this.bannerList = res.result
					}
				}).catch( err =>{
					if(err.msg){
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
				})
			},
			
			
			// 检查考生是否有最近6个月的报名记录
			applyCheck(){
				let url = '/index/applyCheck'
				this.$H.post(url, {},{token: true}).then(res=>{
					if(res){
						this.apply = res.result
					}
					if(!this.apply){
						this.$refs.popup.open('center')
					}else{
						uni.setStorageSync('staff_apply', this.apply)
					}
				}).catch( err =>{
					if(err.msg){
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
				})
			},
			
			
			// 查询正在进行的模拟
			getSimulate(){
				let url = '/index/simulate'
				this.$H.post(url, {}, {token: true}).then(res=>{
					this.simulateList = res.result
				}).catch( err =>{
					if(err.msg){
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
				})
			},
			
			
			// 单点banner
			clickBanner(){
				console.log(123);
			},
			
			tabEntry(type){
				if(!this.apply){
					this.$refs.popup.open('center')
					return
				}
				let url = "/pages/index/index"
				if(type == 1){
					url = "/pages/shuati/index"
				}else if(type == 2){
					url = "/pages/cuoti/index"
				}else if(type == 3){
					url = "/pages/moni/index"
				}else if(type == 4){
					url = "/pages/my/cert"
				}
				
				if(type == 1 || type == 3){
					uni.switchTab({
						url: url
					})
				}
				if(type == 2 || type == 4){
					uni.navigateTo({
						url: url
					})
				}
			},
			
			// 进入模拟考试
			entryMoniPaper(item){
				if(!this.apply){
					this.$refs.popup.open('center')
					return
				}
				
				
				let url = '/moni/startSimulate'
				this.$H.post(url, {
					paperId: item.paperId,
					staffId: item.staffId
				}, {
					token: true
				}).then(res => {
					if (!res || res.code != 200) {
						return uni.showToast({
							title: '操作失败'
						})
					}
					let exam = res.result
					// 跳转刷题页面
					uni.navigateTo({
						url: "/pages/moni/answer?answerPaperId=" + exam.id + "&staffId=" + exam.staffId +
							"&paperId=" + exam.paperId + "&remainedTime=" + exam.remainedTime
					})
				}).catch(err => {
					if (err.msg) {
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
				})
				
				/**
				uni.navigateTo({
					url: "/pages/moni/answer?answerPaperId=" + item.id + "&staffId=" + item.staffId + "&paperId=" + item.paperId
				})*/
			}
		}
	}
</script>

<style>
	.entry_card{
		width:345upx;height:170upx;border-radius: 20upx;
	}
	
	.left_con{
		width: 260upx;
	}
	
	.right_con{
		width: 105upx;
	}
	
	.card_title{
		height:100upx;font-size: 36upx;font-weight: 600;color: #425ca1;line-height: 100upx;
	}
	
	.card_sub_title{
		height:70upx;font-size: 24upx;color: #425ca1;
	}
	
	
	
	.content {
		display: flex;
		flex-direction: column;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.moni_con{
		width:670upx;border-radius: 10px;font-size: 26upx;line-height: 60upx;background-image: linear-gradient(to right,  #eaf4fe, #e1f6ff);
	}
	
	.entry_btn{
		width:180upx;background-color: #425ca1;border-radius: 30upx;line-height:60upx;font-size: 24upx;color:#ffffff;margin-right: 10upx;
	}
	
	.moni_title{
		width:620upx;color: #425ca1;font-weight: bold;
	}
</style>
